<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link type="text/css" rel="stylesheet" href="css/H-ui.css" />
<link type="text/css" rel="stylesheet" href="css/H-ui.admin.css" />
<link type="text/css" rel="stylesheet" href="font/font-awesome.min.css" />

<title>添加房间</title>

<style>
body {
	min-height: 200px;
	font-size: 14px;
}

td, th {
	font-size: 14px;
}

input[type="text"] {
	padding: 5px 5px;
	font-size: 14px;
}
</style>
</head>
<body>
	<div class="pd-20">
		<div class="Huiform">
			<form action="/HotelManagement/AddRoomServlet" method="post">
				<table class="table table-bg">
					<tbody>
						<tr>
							<th width="100" class="text-r"><span class="c-red">*</span>房间号</th>
							<td>
								<table id="optionlist">
								</table>
						<div>
							<input type="button" id="bt1" value="添加房间" onClick="addrows()">
							<input type="button" id="bt2" value="删除房间" onClick="deleterow()">
						</div>
						</td>
						</tr>

						<tr>
							<th class="text-r"><span class="c-red">*</span> 房间类型：</th>
							<td><select name="roomtype" id="roomtype"
								onchange="optionChange()">
									<c:forEach items="${list1}" var="roomtype">
										<option value="${roomtype.typeName}">${roomtype.typeName}</option>
									</c:forEach>
							</select></td>
						<tr>
							<th class="text-r"><span class="c-red">*</span> 房间状态：</th>
							<td><label> <input name="state" type="radio"
									id="state_1" value="有人" checked> 有人
							</label> <label> <input type="radio" name="state" value="无人"
									id="state_0"> 无人
							</label></td>
						</tr>


						<tr>
							<th class="text-r"><span class="c-red">*</span> 房间楼层：</th>
							<td><select name="location">
									<option value="一楼">一楼</option>
									<option value="二楼">二楼</option>
									<option value="三楼">三楼</option>
									<option value="四楼">四楼</option>
									<option value="五楼">五楼</option>
							</select></td>
						</tr>
						<tr>
							<th class="text-r"><span class="c-red">*</span> 房间床数：</th>
							<td><select name="roombedNum" id="roombedNum">
									<!-- 	<c:forEach items="${listprice}" var="roomprice">
										<option value="${roomprice.price}">${roomprice.price}</option>
									</c:forEach>
									<option value=""></option> -->

							</select></td>
						</tr>
						<tr>
							<th class="text-r"><span class="c-red">*</span> 房间价格：</th>
							<td><select name="roomprice" id="roomprice">
							</select></td>
						</tr>
						<tr>
							<th class="text-r">备注：</th>
							<td><textarea class="input-text" name="room-note"
									id="room-note" style="height: 100px; width: 300px;">添加房间备注信息</textarea></td>
						</tr>



						<tr>
							<th></th>
							<td><button class="btn btn-success radius" type="submit">
									<i class="icon-ok"></i> 确定
								</button>
								<button class="btn btn-danger radius" type="reset">
									<i class="icon-remove"></i> 重置
								</button></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
	<script type="text/javascript" src="js/H-ui.js"></script>
	<script type="text/javascript" src="js/H-ui.admin.js"></script>
	<script type="text/javascript">
		
		function addrows() {
			$("#optionlist").append("<input type='text' name='roomid' id='roomid' size='10' />");
		
		}
		function deleterow() {
			var len = optionlist.rows.length;
			if (len <= 1) {
				alert("至少要有一个选项");
			} else {
				optionlist.deleteRow(len - 1);//删除最后一项      
			}
		}
		function getOptionCount() {
			return optionlist.rows.length;
		}

		function optionChange() {
			var xmlhttp;
			var roomtype_typeName = roomtype.value;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var returnJSONString = xmlhttp.responseText;
					var returnJSON = JSON.parse(returnJSONString);
					var showString = "";
					//在每次向下拉框中加入信息是先清空下拉框
					$("#roombedNum").empty();
				$("#roomprice").empty();
				
				/* $("#roombedNum").append(
						"<option value='"+returnJSON[0].bednum+"'>"
						+ returnJSON[0].bednum + "</option>") */
					//循环的想下拉框中加入房间价格
					for (var i = 0; i < returnJSON.length; i++) {
						$("#roombedNum").append(
								"<option value='"+returnJSON[0].bednum+"'>"
								+ returnJSON[i].bednum + "</option>")
						$("#roomprice").append(
								"<option value='"+returnJSON[i].price+"'>"
										+ returnJSON[i].price + "</option>")			
					}
				}
			}
			xmlhttp.open("post", "/HotelManagement/AddRoomAjaxServlet", true);
			xmlhttp.setRequestHeader("Content-type",
					"application/x-www-form-urlencoded;charset=UTF-8");
			xmlhttp.send("roomtype_typeName=" + roomtype_typeName);
		}
		$(".Huiform").Validform();
	</script>
</body>
</html>